<template>
  <!-- 主体区域 -->
  <section id="app">
    <TodoHead @add="add"></TodoHead>
    <TodoMain :list="list" @del="del"></TodoMain>
    <TodoFooter :list="list.length" @clear="list = []"></TodoFooter>
  </section>
</template>

<script>
import TodoHead from "./components/TodoHead.vue";
import TodoMain from "./components/TodoMain.vue";
import TodoFooter from "./components/TodoFooter.vue";
export default {
  //main传递数据 渲染 删除功能
  //添加功能
  data() {
    return {
      list: JSON.parse(localStorage.getItem("list")) || [
        { id: 1, name: "吃饭" },
        { id: 2, name: "睡觉" },
      ],
    };
  },
  components: {
    TodoHead,
    TodoMain,
    TodoFooter,
  },
  methods: {
    del(id) {
      this.list = this.list.filter((ele) => ele.id !== id);
    },
    add(value) {
      if (this.list.every((ele) => ele.name !== value)) {
        this.list.push({
          id: +new Date(),
          name: value,
        });
      } else {
        alert("任务重复");
      }
    },
  },
  watch: {
    list: {
      deep: true,
      immediate: true,
      handler(newValue) {
        localStorage.setItem("list", JSON.stringify(newValue));
      },
    },
  },
};
</script>

<style>
</style>
